<template>
  <div>
    <el-dialog
      class="my_dialog"
      v-bind="$attrs"
      v-on="$listeners"
      v-draggable
      width="600px"
      :visible="visible"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
      >
        <el-form-item label="上级类型" prop="parentId">
          <el-input
            v-model="parentName"
            placeholder="请选择上级类别,不选择默认为顶级"
            clearable
            :style="{ width: '100%' }"
            readonly
            @click.native="visiblea = true"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="类型编码" prop="code">
          <el-input
            v-model="formData.code"
            placeholder="请输入类型编码"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="类型名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入类型名称"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="小数位数" prop="decimalNumber">
          <el-input
            v-model="formData.decimalNumber"
            placeholder="请输入小数位数"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status" required>
          <el-switch
            v-model="formData.status"
            :active-value=0
            :inactive-value=1
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            placeholder="请输入备注"
            :autosize="{ minRows: 4, maxRows: 4 }"
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>

    <!--上级类型选择-->
    <div>
      <parentList ref="parentList" :visible.sync="visiblea" @Ok="parentListOk"/>
    </div>
  </div>
</template>
<script>
  import parentList from "./parentList";
  import {getEntityById} from "./materialType"

  export default {
    inheritAttrs: false,
    components: {parentList},
    props: ["title", "visible", "item"],
    data() {
      return {
        formData: {
          parentId: "",
          code: "",
          name: "",
          decimalNumber: "",
          status: 0,
        },
        rules: {
          // parentId: [
          //   {
          //     required: true,
          //     message: "请选择父级或者根目录",
          //     trigger: "change",
          //   },
          // ],
          code: [
            {
              required: true,
              message: "请输入类型编码",
              trigger: "blur",
            },
          ],
          name: [
            {
              required: true,
              message: "请输入类型名称",
              trigger: "blur",
            },
          ],
          decimalNumber: [
            {
              required: true,
              message: "请输入小数位数",
              trigger: "blur",
            },
          ],
        },
        defaultProps: {
          children: "children",
          label: "name",
        },
        statusOptions: [],
        materialTypeTreeOptions: {},

        // 上级类型选择框打开关闭控制
        visiblea: false,
        // 上级类型的名称 用于展示
        parentName: ''
      };
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
      onOpen() {
        this.getDictText();
      },
      async getDictText() {
        this.$nextTick(() => {
          if (this.item) {
            // 编辑
            this.formData = JSON.parse(JSON.stringify(this.item));
            // 是否是顶级类型 顶级类型没有上级类别
            if (this.formData.parentId) {
              // 根据上级类型ID查询信息并赋值名称
              getEntityById({id:this.formData.parentId}).then(res => {
                if (res.code === 200) {
                  this.parentName = res.data.name;
                } else {
                  this.$message.error("上级类别翻译异常，请联系管理员检查");
                }
              })
            } else {
              this.parentName = "";
            }
          }
        });
      },
      // 表单重置并关闭页面
      onClose() {
        this.$refs["elForm"].resetFields();
        this.parentName = "";
        this.close();
      },
      // 关闭页面
      close() {
        this.$emit("update:visible", false);
      },
      // 确定
      handleConfirm() {
        let form = JSON.parse(JSON.stringify(this.formData));
        console.log(form);
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          this.$emit("Ok", form);
          this.$refs["elForm"].resetFields();
        });
      },
      // 子页面数据接收
      parentListOk(item) {
        console.log(item);
        this.formData.parentId = item.id;
        this.parentName = item.name;
        this.visiblea = false;
      }
    },
  };
</script>
<style>
</style>
